360°-Galerie
gwd-360gallery
Galerieobjekt, das ein sich drehendes Objekt zeigt
Eigenschaften
Name |
Beschreibung |
images:string |
Ein durch Komma getrennter String der Bildpfade, die in der Galerie verwendet werden. |
autoplay:boolean |
Die Bilder in der Galerie sollten nacheinander automatisch wiedergegeben werden, nachdem die Galerie geladen wurde. |
wrap:boolean |
Der Nutzer sollte in der Galerie über den ersten und letzten Frame hinaus wischen können, ohne an einem Ende zu stoppen. |
Ereignisse
Name |
Beschreibung |
firstinteraction |
Wird ausgelöst, wenn der Nutzer zum ersten Mal mit der Galerie interagiert. |
allframesviewed |
Wird ausgelöst, wenn alle Frames der Galerie mindestens einmal angezeigt werden. |
allframesloaded |
Wird ausgelöst, wenn alle Frames der Galerie geladen wurden. |
frameshown |
Wird ausgelöst, wenn ein neuer Frame angezeigt wird. |
frameactivated |
Wird ausgelöst, wenn ein neuer Frame bereits aktiviert wurde, auch wenn er noch nicht sichtbar ist. |
frametap |
Wird ausgelöst, wenn der Nutzer auf einen Frame tippt. |
Methoden
Name |
Beschreibung |
goToFrame(frame:number, opt_animate:string, opt_direction:string) |
Animiert zum angegebenen Frame. |
rotateOnce(opt_duration:number, opt_direction:string) |
Rotiert das Objekt einmal in der Galerie. |
goForwards() |
Bewegt die Galerie um einen Frame vor. |
goBackwards() |
Bewegt die Galerie um einen Frame zurück. |
3D-Hotspot
gwd-3d-hotspot
Ein Element zum Anzeigen von Anmerkungen in einem 3D-Modell
Eigenschaften
Name |
Beschreibung |
data-position:string |
Die Position des Hotspots. |
data-normal:string |
Der Hotspot ist normal. |
hotspot-name:string |
Der Name des Hotspots. |
hotspot-title:string |
Der Titeltext auf der Infokarte. |
hotspot-description:string |
Der Beschreibungstext auf der Infokarte. |
hide-infocard:boolean |
Legt fest, ob die Infokarte ausgeblendet werden soll. |
3D-Hotspot-Container
gwd-3d-hotspot-container
Ein Containerelement für Anmerkungen in einem 3D-Modell
Eigenschaften
Name |
Beschreibung |
up-image:file |
Die URL für das Bild der 3D-Hotspots im unbetätigten Zustand. |
over-image:file |
Die URL für das Bild der 3D-Hotspots im Mouseover- oder Hover-Zustand. |
down-image:file |
Die URL für das Bild der 3D-Hotspots im betätigten Zustand. |
3D-Modell
gwd-3d-model
Eine Komponente des 3D-Viewers
Eigenschaften
Name |
Beschreibung |
id-url:download |
Die ID oder URL des 3D-Modells. |
data-gwd-refresh-assets:string |
Attribut, das von Google Web Designer verwendet wird, um festzustellen, ob die 3D-Assets aktualisiert werden müssen. |
glass:boolean |
Aktiviert das Glasmaterial für das 3D-Modell. |
src:string |
Das anzuzeigende Modell. |
transparent:boolean |
Aktiviert den transparenten Hintergrund im 3D-Modell. |
gesture-cue-icon:file |
Das Gesten-Hinweissymbol. |
gesture-cue-text:string |
Der Text wird unter dem Gesten-Hinweissymbol angezeigt. |
gesture-cue-duration:number |
Die Dauer in Sekunden, für die der Gesten-Hinweis angezeigt wird. Ein Wert von -1 bedeutet keine zeitliche Begrenzung. |
Ereignisse
Name |
Beschreibung |
scene-rendered |
Wird ausgelöst, nachdem die 3D-Modellszene zum ersten Mal gerendert wurde. |
camera-changed |
Wird ausgelöst, wenn sich eine der Eigenschaften der 3D-Kamera ändert. Das Objekt „event.detail“ enthält alle aktuellen Eigenschaften der Kamera. |
hotspot-clicked |
Wird ausgelöst, wenn auf einen Hotspot geklickt wird. Das Objekt „event.detail“ enthält den Namen des angeklickten Hotspots. |
interaction-start |
Wird ausgelöst, wenn der Nutzer mit dem 3D-Modell interagiert. |
interaction-end |
Wird ausgelöst, wenn der Nutzer die Interaktion mit dem 3D-Modell beendet. |
Methoden
Name |
Beschreibung |
setYaw(yaw:number) |
Legt den Gierwinkel in Grad ohne Animation fest und berücksichtigt dabei die Kameralimits. |
setTargetYaw(targetYaw:number) |
Legt den Ziel-Gierwinkel in Grad fest, basierend entweder auf den Kameralimits oder auf der Drehung zwischen -360 und 360 Grad. |
setTargetPitch(targetPitch:number) |
Legt den Ziel-Neigungswinkel in Grad fest. |
incrementTargetPitch(pitchDelta:number) |
Erhöht die Zielneigung eines Deltawinkels in Grad. |
setTargetZoom(targetZoom:number) |
Legt den Zielzoom in Metern fest. |
incrementTargetZoom(zoomDelta:number) |
Erhöht den Zielzoom in Metern. |
setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number) |
Legt den Zieldrehpunkt in Metern fest. |
setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number) |
Legt die lokale Zielposition in Metern fest. |
setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number) |
Legt die Materialfarbe fest. |
playAnimation(animationName:string) |
Gibt die Animation wieder. |
pauseAnimation(animationName:string) |
Pausiert die Animation. |
setAnimationTime(animationName:string, animationTime:number) |
Legt die Animationszeit in Sekunden fest. |
lookAtHotspot(hotspotName:string) |
Verschiebt und dreht die Kamera, um den Fokus auf den Hotspot zu richten. |
3D-Modellansicht
gwd-3d-model-viewer
Eine Komponente, die die 3D-Modell-Viewer-Komponente einbindet
Eigenschaften
Name |
Beschreibung |
src:file |
Die Quelldatei des 3D-Modells. |
gesture-cue-icon:file |
Das Gesten-Hinweissymbol. |
gesture-cue-text:string |
Der Text wird unter dem Gesten-Hinweissymbol angezeigt. |
gesture-cue-duration:number |
Die Dauer in Sekunden, für die der Gesten-Hinweis angezeigt wird. Ein Wert von -1 bedeutet keine zeitliche Begrenzung. |
skybox-image:file |
Das Hintergrundbild der 3D-Modellszene. |
environment-image:file |
Steuert die Umgebungsreflexion des 3D-Modells. |
Ereignisse
Name |
Beschreibung |
scene-rendered |
Wird ausgelöst, nachdem die 3D-Modellszene zum ersten Mal gerendert wurde. |
camera-changed |
Wird ausgelöst, wenn sich eine der Eigenschaften der 3D-Kamera ändert. Das Objekt „event.detail“ enthält alle aktuellen Eigenschaften der Kamera. |
hotspot-clicked |
Wird ausgelöst, wenn auf einen Hotspot geklickt wird. Das Objekt „event.detail“ enthält den Namen des angeklickten Hotspots. |
interaction-start |
Wird ausgelöst, wenn der Nutzer mit dem 3D-Modell interagiert. |
interaction-end |
Wird ausgelöst, wenn der Nutzer die Interaktion mit dem 3D-Modell beendet. |
Methoden
Name |
Beschreibung |
setYaw(yaw:number) |
Legt den Gierwinkel in Grad ohne Animation fest und berücksichtigt dabei die Kameralimits. |
setTargetYaw(targetYaw:number) |
Legt den Ziel-Gierwinkel in Grad fest, basierend entweder auf den Kameralimits oder auf der Drehung zwischen -360 und 360 Grad. |
setTargetPitch(targetPitch:number) |
Legt den Ziel-Neigungswinkel in Grad fest. |
incrementTargetPitch(pitchDelta:number) |
Erhöht die Zielneigung eines Deltawinkels in Grad. |
setTargetZoom(targetZoom:number) |
Legt den Zielzoom in Metern fest. |
incrementTargetZoom(zoomDelta:number) |
Erhöht den Zielzoom in Metern. |
setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number) |
Legt den Zieldrehpunkt in Metern fest. |
setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number) |
Legt die lokale Zielposition in Metern fest. |
setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number) |
Legt die Materialfarbe fest. |
playAnimation(animationName:string) |
Gibt die Animation wieder. |
pauseAnimation(animationName:string) |
Pausiert die Animation. |
setAnimationTime(animationName:string, animationTime:number) |
Legt die Animationszeit in Sekunden fest. |
Zum Kalender hinzufügen
gwd-addtocalendar
Fügt den Kalendern ein Ereignis hinzu
Eigenschaften
Name |
Beschreibung |
event-title:string |
Der Name des Ereignisses, wie er im Kalender des Nutzers zu sehen ist. |
start-date:string |
Das Datum, an dem das Ereignis beginnt. |
start-time:string |
Die Uhrzeit, zu der das Ereignis beginnt (24-Std.-Format). |
end-date:string |
Das Datum, an dem das Ereignis endet. |
end-time:string |
Die Uhrzeit, zu der das Ereignis endet (24-Std.-Format). |
timezone:string |
Die Zeitzone für das Ereignis. Wenn diese festgelegt ist, wird die Zeit korrekt für den Nutzer angepasst, wenn er sich in einer anderen Zeitzone befindet. |
location:string |
Der Ort des Ereignisses. |
description:string |
Die Beschreibung des Ereignisses. |
icalendar:boolean |
Legt fest, ob die iCalender-Datei verwendet werden soll oder nicht |
google:boolean |
Legt fest, ob Google Kalender verwendet werden soll oder nicht. |
windows-live:boolean |
Legt fest, ob Windows Live Calendar verwendet werden soll oder nicht. |
yahoo:boolean |
Legt fest, ob Yahoo! Calendar verwendet werden soll oder nicht. |
bg-color:string |
Hexadezimalwert für die Hintergrundfarbe des Drop-downs. |
font-color:string |
Hexadezimalwert für die Schriftfarbe des Drop-downs. |
font-family:string |
Name für die Schrift des Drop-downs. |
font-size:string |
Größe für die Schrift des Drop-downs. |
font-weight:string |
Stärke der Schrift des Drop-downs. |
highlight-color:string |
Hexadezimalwert für die Markierungsfarbe des Drop-downs. |
Audio
gwd-audio
Eine Komponente, die ein HTMLAudioElement
einbindet
Eigenschaften
Name |
Beschreibung |
autoplay:boolean |
Legt fest, ob die Audio-Datei beim Laden automatisch wiedergegeben wird |
loop:boolean |
Legt fest, ob die Audio-Datei nach dem Fertigstellen in Schleife abgespielt wird |
muted:boolean |
Legt fest, ob die Audiodatei stumm gestartet wird. |
controls:boolean |
Legt fest, ob die standardmäßigen, nativen Steuerelemente des Videoplayers aktiviert werden. |
sources:file |
Ein durch Komma getrennter String von Audioquellen in unterschiedlichen Formaten. |
Ereignisse
Name |
Beschreibung |
play |
Wird ausgelöst, wenn die Wiedergabe der Medien nach dem Pausieren gestartet wird. |
pause |
Wird ausgelöst, wenn die Wiedergabe pausiert wird |
playing |
Wird ausgelöst, wenn die Medien entweder zum ersten Mal nach einer Pause oder nach dem Ende noch einmal wiedergegeben werden. |
ended |
Wird ausgelöst, wenn die Wiedergabe abgeschlossen ist |
volumechange |
Wird ausgelöst, wenn sich die Audiolautstärke beim Einstellen oder durch die Änderung des Attributs zum Stummschalten ändert |
seeked |
Wird ausgelöst, wenn ein Suchvorgang abgeschlossen ist |
waiting |
Wird ausgelöst, wenn der angeforderte Vorgang, z. B. die Wiedergabe, verzögert wird, weil zuerst ein anderer Vorgang abgeschlossen werden muss, z. B. eine Suche |
Methoden
Name |
Beschreibung |
mute() |
Wechselt zwischen Audio stummschalten und Stummschaltung aufheben. |
pause() |
Hält die Audiodatei an. |
play() |
Gibt die Audiodatei wieder. |
replay() |
Gibt die Audiodatei noch einmal wieder. |
seek(time:number) |
Springt zur angegebenen Zeit in der Audiodatei. |
Karussell-Galerie
gwd-carouselgallery
Ein Galerieobjekt, bei dem die Frames in einem Karussell-Layout angezeigt werden
Eigenschaften
Name |
Beschreibung |
images:string |
Ein durch Komma getrennter String der Bildpfade, die in der Galerie verwendet werden. |
groups:string |
Ein durch Komma getrennter String der Gruppen-IDs. |
transition-duration:number |
Animationsgeschwindigkeit der Galerie in Millisekunden |
start-frame:number |
Die Nummer des Bildes, das als Erstes zu sehen sein soll. |
autoplay:boolean |
Legt fest, ob für die Frames einmal oder nie Autoplay verwendet wird |
has-navigation:boolean |
Legt fest, ob Steuerelemente für die Galerienavigation automatisch eingeschlossen werden. |
navigation-thumbnails:boolean |
Legt fest, ob zur Navigation Miniaturansichten statt Punkte verwendet werden |
navigation-highlight:color |
Ein CSS-Farbcode, der zum Markieren des aktiven Frames in der Navigation verwendet wird |
scaling:string |
Legt fest, wie Bildinhalt für seinen Frame skaliert wird |
frame-width:number |
Breite eines Steuerfelds für Inhalt. |
frame-height:number |
Höhe eines Steuerfelds für Inhalt. |
neighbor-rotation-y:number |
Eine Y-Achsenrotation für benachbarte Steuerfelder des aktuell zentrierten Steuerfelds, wird zum Neigen der benachbarten Steuerfelder verwendet |
neighbor-translation-x:number |
Eine X-Achsenübersetzung für benachbarte Steuerfelder des aktuell zentrierten Steuerfelds, wird zum Anpassen der Platzierung der benachbarten Steuerfelder verwendet |
neighbor-translation-y:number |
Eine Y-Achsenübersetzung für benachbarte Steuerfelder des aktuell zentrierten Steuerfelds |
neighbor-translation-z:number |
Eine Z-Achsenübersetzung für benachbarte Steuerfelder des aktuell zentrierten Steuerfelds. |
exit-urls:string |
Ein durch Komma getrennter String der Exit-URLs, die den Bildern in der Galerie entsprechen. |
show-reflection:boolean |
Legt fest, ob eine CSS3-basierte Reflexion gezeigt werden soll. |
pause-front-media:boolean |
Legt fest, ob bei einem Framewechsel die Medienelemente (z. B. Video oder Audio) auf dem vorherigen Frame pausiert werden. |
resume-next-media:boolean |
Legt fest, ob bei einem Framewechsel die Medienelemente (z. B. Video oder Audio) auf dem nächsten Frame fortgesetzt werden. |
Ereignisse
Name |
Beschreibung |
firstinteraction |
Wird ausgelöst, wenn der Nutzer zum ersten Mal mit der Galerie interagiert. |
allframesviewed |
Wird ausgelöst, wenn alle Frames der Galerie mindestens einmal angezeigt wurden. |
allframesloaded |
Wird ausgelöst, wenn alle Frames der Galerie geladen wurden. |
autoplayended |
Wird ausgelöst, wenn die automatische Wiedergabe aus irgendeinem Grund beendet wurde. Das Ereignis event.detail.completed lautet „wahr“, wenn die Wiedergabe nach Erreichen der festgelegten Dauer endet, ansonsten lautet es „falsch“. |
frameshown |
Wird ausgelöst, wenn ein neuer Frame angezeigt wird. |
frameactivated |
Wird ausgelöst, wenn ein neuer Frame bereits aktiviert wurde, auch wenn er noch nicht sichtbar ist. |
frameautoplayed |
Wird ausgelöst, wenn ein Frame für die automatische Wiedergabe aktiviert wird. Dieses Ereignis kann häufiger ausgelöst werden als frameshown , da es bei mehreren Frames, die gleichzeitig eingeblendet werden, für jeden einzelnen Frame separat ausgelöst wird. |
frametap |
Wird ausgelöst, wenn der Nutzer auf einen Frame tippt. |
reachleftend |
Wird ausgelöst, wenn das linke Ende der Galerie erreicht wird. |
reachrightend |
Wird ausgelöst, wenn das rechte Ende der Galerie erreicht wird. |
trackstart |
Wird ausgelöst, wenn das Ziehen der Maus oder die Ziehbewegung beginnt. |
track |
Die Komponente registriert die X- und Y-Ortsdaten der Maus oder Ziehbewegung. |
trackend |
Wird ausgelöst, wenn das Ziehen der Maus oder die Ziehbewegung endet. |
Methoden
Name |
Beschreibung |
goToFrame(index:number, opt_animate:string) |
Wechselt zum angegebenen Frame. |
goForwards(opt_animate:string) |
Wechselt zum nächsten Frame, falls verfügbar. |
goBackwards(opt_animate:string) |
Wechselt zum vorherigen Frame. |
rotateOnce(opt_duration:number, opt_direction:string) |
Zeigt jeden Frame einmal in der Galerie an |
stopRotation() |
Stoppt die aktuelle automatische Rotation. |
Cue-Punkt
gwd-cuepoint
Eine Komponente, die an eine Google Web Designer-Videokomponente angehängt ist und ein Ereignis auslöst, wenn das Video eine bestimmte Zeit erreicht
Eigenschaften
Name |
Beschreibung |
time:number |
Der Zeitpunkt in Sekunden, zu dem das Ereignis ausgelöst wird. |
Ereignisse
Name |
Beschreibung |
cuepoint |
Wird ausgelöst, wenn die Wiedergabe der Medien eine in einem Cue-Punkt definierte Zeit erreicht hat. |
Methoden
Name |
Beschreibung |
seek() |
Legt die Videozeit auf die Zeit eines Cue-Punkts fest. |
setTime(time:number) |
Legt die Zeit des Cue-Punkts fest. |
Date Swap
gwd-dateswap
Mit dieser Komponente wird die Sichtbarkeit des Elements in Abhängigkeit davon geändert, wie das aktuelle Datum und der Zielzeitraum zueinander stehen
Eigenschaften
Name |
Beschreibung |
from_date:string |
Ein String, der ein Datum auf der Grundlage von RFC2822 oder ISO 8601 darstellt. |
to_date:string |
Ein String, der ein Datum auf der Grundlage von RFC2822 oder ISO 8601 darstellt. |
Ereignisse
Name |
Beschreibung |
before |
Wird ausgelöst, wenn das aktuelle Datum vor dem from_date (ausschließlich) liegt. |
during |
Wird ausgelöst, wenn das aktuelle Datum zwischen dem from_date und dem to_date (einschließlich) liegt. |
after |
Wird ausgelöst, wenn das aktuelle Datum nach dem to_date (ausschließlich) liegt. |
Methoden
Name |
Beschreibung |
checkDate() |
Vergleicht das aktuelle Datum mit dem Zeitraum. |
Galerienavigation
gwd-gallerynavigation
Ein Navigationssteuerelement für eine Google Web Designer-Galeriekomponente
Eigenschaften
Name |
Beschreibung |
for:string |
Ein durch Komma getrennter String der Bildpfade, die in der Galerie verwendet werden. |
highlight:color |
Ein CSS-Farbcode, der zum Markieren des aktiven Frames in der Navigation verwendet wird |
use-thumbnails:boolean |
Legt fest, ob zur Navigation Miniaturansichten statt Punkte verwendet werden |
Allgemeine Anzeige
gwd-genericad
Implementiert den Anzeigencontainer „Allgemein“
Ereignisse
Name |
Beschreibung |
adinitialized |
Wird ausgelöst, kurz bevor der Anzeigeninhalt durch das Element „Allgemein“ gerendert wird. |
Methoden
Name |
Beschreibung |
initAd() |
Startet die Anzeige nach Erhalt der entsprechenden Ereignisse vom Enabler. |
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string) |
Navigiert zu den maximierten Abmessungen der Anzeige. Falls die Seiten-ID nicht angegeben wurde, navigiert die Anzeige zur Standardseite. |
exit(url:string, opt_collapseOnExit:boolean, opt_pageId:string) |
Beendet die Anzeige und minimiert sie optional. |
Geste
gwd-gesture
Abstraktion für eine Reihe von Bewegungsereignissen
Eigenschaften
Name |
Beschreibung |
touch-action:string |
Interpretationsweise für Berührungsaktionen. Gültige Werte sind: auto , none , pan-x und pan-y . Das Standardverhalten ist identisch mit der Einstellung none . |
Ereignisse
Name |
Beschreibung |
hover |
Wird ausgelöst, wenn die Maus oder die Berührung die Komponentengrenze überschreitet. |
hoverend |
Wird ausgelöst, wenn die Maus oder die Berührung die Komponentengrenze verlässt. |
trackstart |
Wird ausgelöst, wenn das Ziehen der Maus oder die Ziehbewegung beginnt. |
track |
Die Komponente registriert die X- und Y-Ortsdaten der Maus oder Ziehbewegung. |
trackend |
Wird ausgelöst, wenn das Ziehen der Maus oder die Ziehbewegung endet. |
tap |
Wird ausgelöst, wenn ein Tippen des Nutzers oder ein Mausklick registriert wird. |
swipeleft |
Wird ausgelöst, wenn der Nutzer nach links wischt. |
swiperight |
Wird ausgelöst, wenn der Nutzer nach rechts wischt. |
swipeup |
Wird ausgelöst, wenn der Nutzer nach oben wischt. |
swipedown |
Wird ausgelöst, wenn der Nutzer nach unten wischt. |
Google Anzeige
gwd-google-ad
Implementiert den Google-Anzeigencontainer
Eigenschaften
Name |
Beschreibung |
polite-load:boolean |
Legt fest, ob diese Anzeige die Polite Load-Semantik einhalten muss. |
fullscreen:boolean |
Legt fest, ob diese Anzeige eine Vollbildmaximierung versuchen soll oder nicht |
Ereignisse
Name |
Beschreibung |
adinitialized |
Wird ausgelöst, bevor das Element den Inhalt der Anzeige rendert. |
expandstart |
Wird ausgelöst, wenn der Enabler ein Ereignis „Start maximieren“ auslöst. |
expandfinish |
Wird ausgelöst, wenn der Enabler ein Ereignis „Ende maximieren“ auslöst. |
collapsestart |
Wird ausgelöst, wenn der Enabler ein Ereignis „Start minimieren“ auslöst. |
collapsefinish |
Wird ausgelöst, wenn der Enabler ein Ereignis „Ende minimieren“ auslöst. |
fullscreensupport |
Wird ausgelöst, wenn die Vollbildmaximierung unterstützt wird. |
dynamicelementsready |
Wird ausgelöst, nachdem dynamische Daten auf den Anzeigeninhalt angewendet wurden. |
hostpagescroll |
Wird ausgelöst, wenn der Enabler ein Ereignis „Scrollen auf der Host-Seite“ auslöst. |
Methoden
Name |
Beschreibung |
initAd() |
Startet die Anzeige nach Erhalt der entsprechenden Ereignisse vom Enabler. |
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string) |
Navigiert zu den maximierten Abmessungen der Anzeige. Falls die Seiten-ID nicht angegeben wurde, navigiert die Anzeige zur Standardseite. |
exit(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string) |
Beendet die Anzeige und minimiert sie optional. |
exitOverride(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string) |
Beendet die Anzeige zur angegebenen URL, unabhängig von dem in Studio festgelegten Wert. Minimiert die Anzeige, wenn opt_collapseOnExit den Wert „wahr“ hat. |
incrementCounter(metric:string, opt_isCumulative:boolean) |
Erfasst ein Zählerereignis. |
startTimer(timerId:string) |
Startet einen Ereignis-Timer |
stopTimer(timerId:string) |
Stoppt einen Ereignis-Timer |
reportManualClose() |
Erfasst das manuelle Schließen einer Anzeige des Typs „Floating“, „Pop-up“, „Expandable“, „In-Page mit Pop-up“ oder „In-Page mit Floating“. Diese Methode ist ein Proxy für Enabler.reportManualClose . |
Hotspot
gwd-hotspot
Eine Komponente, mit der ein Hotspot zu bestimmten Zeiten eines Videos angezeigt und ausgeblendet wird
Eigenschaften
Name |
Beschreibung |
show-time:number |
Der Zeitpunkt in Sekunden, zu dem der Hotspot sichtbar wird. |
hide-time:number |
Der Zeitpunkt in Sekunden, zu dem der Hotspot nicht mehr sichtbar ist. |
left:string |
Die linke Position des Hotspots über dem Video im Verhältnis zur Breite des Videoframes (z. B. „5 %“). |
top:string |
Die oberste Position des Hotspots über dem Video im Verhältnis zur Höhe des Videoframes (z. B. „5 %“). |
width:string |
Die Breite des Hotspots proportional zum Video im Verhältnis zur Breite des Videoframes. |
height:string |
Die Höhe des Hotspots proportional zum Video im Verhältnis zur Höhe des Videoframes. |
Ereignisse
Name |
Beschreibung |
hotspotshown |
Wird ausgelöst, wenn der Hotspot sichtbar wird. |
hotspothidden |
Wird ausgelöst, wenn der Hotspot ausgeblendet wird. |
Methoden
Name |
Beschreibung |
show(showHide:boolean) |
Hotspot-Sichtbarkeit umschalten. |
seek(showHide:boolean) |
Legt eine Videozeit für die Anzeige- oder Ausblendezeit des Hotspots fest. |
setTimes(showTime:number, hideTime:number) |
Legt die Anzeige- und Ausblendezeiten des Hotspots fest. |
iFrame
gwd-iframe
Eine Komponente, die ein HTMLIframeElement
einbindet
Eigenschaften
Name |
Beschreibung |
source:string |
Die Quelle des iFrame. Ersetzt das Attribut src des nativen Bildelements. |
scrolling:string |
Legt fest, ob der iFrame Bildlaufleisten enthält |
Ereignisse
Name |
Beschreibung |
iframeload |
Wird ausgelöst, wenn der iFrame geladen wird. |
Methoden
Name |
Beschreibung |
setUrl(url:string) |
Ändert die URL des iFrame und lädt sie sofort. |
Bild
gwd-image
Eine Komponente, die ein HTMLImageElement
einbindet, um das verzögerte Laden der Bildquelle zu unterstützen
Eigenschaften
Name |
Beschreibung |
source:file |
Die Bildquelle. Ersetzt das Attribut src des nativen Bildelements. |
alt:string |
Der alternative Text für das Bild. |
scaling:string |
Legt fest, wie das Bild für den Frame skaliert wird. |
alignment:string |
Legt fest, wie das Bild innerhalb des Anzeigebereichs ausgerichtet wird. |
focalpoint:string |
Codiert einen Blickpunkt eines Bildes als x/y-Pixelkoordinaten. |
disablefocalpoint:boolean |
Deaktiviert den im Attribut focalpoint festgelegten Blickpunkt (wird intern von Google Web Designer verwendet). |
Bildschaltfläche
gwd-imagebutton
Eine Bildschaltfläche mit Unterstützung für die Stati "Nach oben", "Über" und "Nach unten"
Eigenschaften
Name |
Beschreibung |
up-image:file |
Die URL für das Bild der Schaltfläche im unbetätigten Zustand. |
over-image:file |
Die URL für das Bild der Schaltfläche im Mouseover-Zustand oder Hover-Zustand. |
down-image:file |
Die URL für das Bild der Schaltfläche im betätigten Zustand. |
bgcolor:string |
Die Hintergrundfarbe der Schaltfläche. |
alignment:string |
Ausrichtung des Bilds innerhalb des Anzeigebereichs |
scaling:string |
Anpassung des Bilds an den übergeordneten Container |
disabled:boolean |
Legt fest, ob die Schaltfläche deaktiviert werden soll |
Ereignisse
Name |
Beschreibung |
imagebuttonloaded |
Wird ausgelöst, wenn alle Bilder geladen wurden. |
Methoden
Name |
Beschreibung |
toggleEnable() |
Wechselt zwischen aktiviert und deaktiviert. |
setImages(upSrc:string, opt_overSrc:string, opt_downSrc:string) |
Legt die Bildquellen für alle Schaltflächenzustände fest. |
Bildeffekt
gwd-image-effect
Eine „Bildeffekt“-Komponente
Eigenschaften
Name |
Beschreibung |
scaling:string |
Legt fest, wie das Bild für den Frame skaliert wird. |
time-limit:number |
Zeitlimit für die Animation. Ein Wert von -1 bedeutet keine zeitliche Begrenzung. |
settings:string |
Öffnet das Dialogfeld mit den Komponenteneinstellungen. |
images:string |
Ein durch Komma getrennter String der Bildpfade, die im Bildeffekt verwendet werden. |
Ereignisse
Name |
Beschreibung |
autoplayended |
Wird ausgelöst, wenn die automatische Wiedergabe nach Ablauf des Zeitlimits beendet wird. |
Methoden
Name |
Beschreibung |
play() |
Animation wiedergeben. |
pause() |
Animation pausieren. |
Bildeffekt „Vorher und Nachher“
gwd-before-and-after
Ein Bildeffekt, bei dem zwei ähnliche Bilder zu einem Vorher-Nachher-Vergleich zusammengefasst werden
Bildeffekt „Atmen“
gwd-breathe
Ein Bildeffekt, bei dem ein Bild durch elastisches Ausziehen und Zusammenziehen animiert wird
Bildeffekt „Einblenden“
gwd-reveal
Ein Bildeffekt, bei dem ein Bild mit einem elliptischen Fokusbereich gescannt wird, in den ein zweites Bild eingeblendet wird
Bildeffekt „Welle“
gwd-wave
Ein Bildeffekt, bei dem eine animierte Wellentransformation auf ein Bild angewendet wird, wodurch sich das Bild nach einem Wellenmuster schlängelt
Karte
gwd-map
Erweitert HTMLElement
zur Zusammenfassung von Aufrufen der Google Maps API
Eigenschaften
Name |
Beschreibung |
api-key:string |
Google API-Schlüssel. Weitere Informationen finden Sie unter https://developers.google.com/maps/documentation/javascript/get-api-key. |
query:string |
Name der Suchanfrage, die Standorte der Google Places API zurückgibt. |
start-latitude:decimal |
Startet Koordinate für mittleren Breitengrad. Der Wert sollte zwischen -90 und 90 Grad liegen. |
start-longitude:decimal |
Startet Koordinate für mittleren Längengrad. Der Wert sollte zwischen -180 und 180 Grad liegen. |
request-user-location:boolean |
Legt fest, ob der Nutzerstandort angefragt werden muss. Wenn die Eigenschaft auf „wahr“ gesetzt ist, wird der Nutzer aufgefordert, den Standort anzugeben. |
client-id:string |
Google Maps Premier-Client-ID |
search-radius:number |
Mindestradius für die Standortsuche in Metern |
result-limit:number |
Maximale Anzahl der Suchergebnisse, die in einer einzelnen Suchanfrage zurückgegeben werden |
start-zoom:number |
Startet Zoomstufe in Einheiten, die von der Google Maps-API verwendet werden. Der Standard lautet 16, was der Stadtteilebene entspricht. |
marker-src:string |
Bilddateiname für Ortsmarkierung als Sprite mit den Komponenten "An", "Aus" sowie "Schatten" |
gps-src:string |
GPS-Standort, blauer Punkt, Bilddateiname |
msg-start-position-prompt:string |
Lokalisierungsstring für den Text der Eingabeaufforderung im Dialogfeld, um eine Startposition auszuwählen |
msg-gps-button-label:string |
Lokalisierungsstring für das Label der Schaltfläche, die den Standort eines Nutzers aus der API für die Standortbestimmung abruft |
msg-manual-position-button-label:string |
Lokalisierungsstring für das Label der Schaltfläche, die das Standortsuchfeld anzeigt |
msg-manual-position-prompt:string |
Lokalisierungsstring für den Text der Eingabeaufforderung im Dialogfeld, um eine Startposition auf der Karte auszuwählen |
msg-manual-position-placeholder:string |
Lokalisierungsstring für den Platzhaltertext des Suchfelds, um eine Startposition auf der Karte auszuwählen |
msg-geocode-failure:string |
Lokalisierungsstring für den Text der Eingabeaufforderung im Dialogfeld, der angezeigt wird, wenn ein Versuch scheitert, die API für die Standortbestimmung zu verwenden. |
msg-no-results-found:string |
Lokalisierungsstring für den Text der Eingabeaufforderung im Dialogfeld, der angezeigt wird, wenn am ausgewählten Standort keine Ergebnisse gefunden werden |
Ereignisse
Name |
Beschreibung |
pinclick |
Wenn der Nutzer eine Markierung auf der Karte auswählt. |
Methoden
Name |
Beschreibung |
setCenter(latitude:number, longitude:number, opt_accuracy:number) |
Legt den mit Breitengrad und Längengrad angegebenen Ort als Mitte der Karte fest. |
Seite
gwd-page
Eine Seite stellt eine einzelne Karte im Seitenstapel dar
Eigenschaften
Name |
Beschreibung |
expanded:boolean |
Legt fest, ob diese Seite als erweiterte Seite betrachtet werden soll (anzeigenspezifisch). |
centered:boolean |
Legt fest, ob der Inhalt dieser Seite zentriert werden soll. |
alt-orientation-page:string |
Die Seiten-ID der Seite, die diesen Inhalt in alternativer Ausrichtung besser darstellt |
Ereignisse
Name |
Beschreibung |
attached |
Wird ausgelöst, kurz nachdem die Seite dem DOM angehängt wird |
detached |
Wird ausgelöst, kurz nachdem die Seite aus dem DOM entfernt wird |
pageactivated |
Wird ausgelöst, wenn die Seite angezeigt werden kann. |
pagedeactivated |
Wird ausgelöst, wenn die Seite nicht mehr angezeigt wird. |
pageload |
Wird ausgelöst, nachdem der Inhalt der Seite erfolgreich geladen wurde. |
pagepresenting |
Wird ausgelöst, kurz bevor die Seite die Einführungsanimation darstellt. |
shake |
Wird ausgelöst, wenn eine Schüttelbewegung des Geräts erkannt wird. |
tilt |
Wird ausgelöst, wenn eine Neigung des Geräts erkannt wird. |
rotatetoportrait |
Wird ausgelöst, wenn ein Gerät in das Hochformat gedreht wird. |
rotatetolandscape |
Wird ausgelöst, wenn ein Gerät in das Querformat gedreht wird. |
Seitenstapel
gwd-pagedeck
Ein PageDeck (Seitenstapel) ist ein Container für Seiten. Er zeigt jeweils eine Seite. Unterschiedliche Seiten werden in einer beliebigen festgelegten Reihenfolge in den Vordergrund gebracht. Dabei werden alle unterstützten Seitenübergänge angezeigt.
Eigenschaften
Name |
Beschreibung |
default-page:string |
ID der Standardseite |
Ereignisse
Name |
Beschreibung |
pagetransitionstart |
Wird ausgelöst, bevor ein Seitenübergang erfolgt. |
pagetransitionend |
Wird ausgelöst, nachdem ein Seitenübergang abgeschlossen ist. |
Methoden
Name |
Beschreibung |
goToNextPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) |
Navigiert zur nächsten Seite im Seitenstapel. |
goToPreviousPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) |
Navigiert zur vorherigen Seite im Seitenstapel. |
goToPage(pageId:string, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) |
Navigiert zur angegebenen Seite im Seitenstapel. |
getCurrentPage() |
Gibt die aktuelle Seite oder NULL zurück, wenn die Seite nicht angezeigt wird. |
getDefaultPage() |
Gibt die Standardseite zurück, falls angegeben, andernfalls die erste Seite. |
getPage(pageId:string) |
Gibt die Seite mit der angegebenen ID zurück |
findPageIndexByAttributeValue(attributeName:string, value:string|number|boolean) |
Gibt das Seitenelement zurück mit dem Wert des Attributs, der dem angegebenen Wert entspricht oder -1, falls die Seite nicht gefunden wird |
getOrientationSpecificPage(orientation:string, pageId:string) |
Gibt die Seite zurück, die mit der angegebenen Ausrichtung übereinstimmt |
getElementById(id:string) |
Findet das Element mit der angegebenen ID auf allen Seiten in diesem Seitenstapel. Da gwd-pagedeck nur die aktive Seite im DOM behält, gibt das standardmäßige document.getElementById(id) nicht die Elemente in den inaktiven Seiten zurück. Es ist ein häufiger Anwendungsfall, vor allem bei dynamischen Anzeigen, dass auf Elemente in inaktiven Seiten verwiesen wird. Hier kann diese Methode verwendet werden, um einen Verweis zum Element nach dessen ID aufzuheben. |
Parallaxe
gwd-parallax
Eine „Parallaxe“-Komponente
Eigenschaften
Name |
Beschreibung |
settings:string |
Öffnet das Dialogfeld mit den Komponenteneinstellungen. |
yscroll:decimal |
Der Scrollfaktor für die Parallaxe-Animation beim Rendern im Anzeigebereich. |
Ereignisse
Name |
Beschreibung |
ready |
Wird ausgelöst, wenn alle Assets in der Parallaxe geladen wurden. |
Partikeleffekte
gwd-particleeffects
Komponente zum Zusammenstellen mehrerer Partikeleffekte und Bilder
Eigenschaften
Name |
Beschreibung |
autoplay:boolean |
Legt fest, ob die Animation beim Laden der Komponente automatisch abgespielt werden soll. |
time-limit:number |
Zeitlimit für die Animation. Ein Wert von -1 bedeutet keine zeitliche Begrenzung. |
settings:string |
Öffnet das Dialogfeld mit den Komponenteneinstellungen. |
Ereignisse
Name |
Beschreibung |
timelimitreached |
Wird ausgelöst, wenn die Wiedergabe einer Animation das bestimmte Zeitlimit erreicht hat. |
Methoden
Name |
Beschreibung |
play() |
Animation wiedergeben. |
pause() |
Animation pausieren. |
stop() |
Animation stoppen. |
Partikel
gwd-particles
Komponente „Partikelsystem“
Eigenschaften
Name |
Beschreibung |
acceleration-x:number |
Die x-Komponente der Beschleunigung in Pixel/Frame/Frame. |
acceleration-y:number |
Die y-Komponente der Beschleunigung in Pixel/Frame/Frame. |
angle-max:number |
Der maximale Winkel der Geschwindigkeitsrichtung der Partikel. |
angle-min:number |
Der minimale Winkel der Geschwindigkeitsrichtung der Partikel. |
autoplay:boolean |
Legt fest, ob die Animation automatisch abgespielt werden soll, wenn das übergeordnete gwd-particleeffects wiedergegeben wird. |
color1:color |
Die erste Farbe. |
color2:color |
Die zweite Farbe. |
color-rate:number |
Die Geschwindigkeit, mit der die Farbe von der Farbe 1 zu Farbe 2 pro Frame zusätzlich addiert wechselt. Sie liegt im Bereich [0, 1]. |
emit-interval:number |
Die Anzahl der Frames, bis der nächste Partikel ausgegeben wird. |
emit-x-max:string |
Die maximale x-Koordinate des Partikelausgabebereichs. |
emit-x-min:string |
Die minimale x-Koordinate des Partikelausgabebereichs. |
emit-y-max:string |
Die maximale y-Koordinate des Partikelausgabebereichs. |
emit-y-min:string |
Die minimale y-Koordinate des Partikelausgabebereichs. |
loop:boolean |
Legt fest, ob die Animation als Schleife wiedergegeben werden soll. |
number:number |
Die Anzahl der Partikel. |
opacity-min:number |
Die minimale Deckkraft der Partikel. |
opacity-max:number |
Die maximale Deckkraft der Partikel. |
opacity-rate:number |
Der Grad, um den sich die Deckkraft pro Frame ändert. Sie wird zur aktuellen Deckkraft eines Partikels addiert. |
random-colors:boolean |
Legt fest, ob die Partikel zufällige Farben zwischen Farbe 1 und Farbe 2 haben. Bei „falsch“ werden alle Partikel mit Farbe 1 initialisiert. |
shape:string |
Die Form des Sprites. |
size-max:number |
Die maximale Größe der Partikel in Pixel. |
size-min:number |
Die minimale Größe der Partikel in Pixel. |
size-rate:number |
Der Grad, um den sich die Größe pro Frame ändert. Sie wird zur aktuellen Größe eines Partikels addiert. |
skip-forward:number |
Überspringen zu einer Zeit, wenn ein bestimmter Prozentsatz von Partikeln in ein Partikelsystem ausgegeben wurde. |
speed-max:number |
Die maximale Geschwindigkeit der Partikel in Pixel/Frame. |
speed-min:number |
Die minimale Geschwindigkeit der Partikel in Pixel/Frame. |
sprite-image-src:file |
Die Quelle der Bilder, die als Sprites verwendet werden. |
turbulence-frequency:number |
Die Frequenz der turbulenten Strömung. Bei höheren Werten treten häufiger Unregelmäßigkeiten in der Bewegung auf. Muss eine positive Zahl sein. |
turbulence-rate:number |
Der Grad, um den sich die Stärke mit der Zeit ändert. |
turbulence-strength:number |
Die Stärke der turbulenten Strömung, die auf die Partikel einwirkt. Muss eine positive Zahl sein. |
turbulence-trail:number |
Legt fest, wie viele vorherige und aktuelle Zustände eines Partikels gerendert werden sollen. |
Methoden
Name |
Beschreibung |
play() |
Animation wiedergeben. |
pause() |
Animation pausieren. |
stop() |
Animation stoppen. |
SpriteSheet
gwd-spritesheet
Einzelnen Keyframe oder einzelne Animation aus dem Sprite Sheet anzeigen
Eigenschaften
Name |
Beschreibung |
imagesource:file |
Die URL für das Sprite Sheet-Bild. |
offsetx:number |
Der Abstand in Pixeln von der linken Seite des Sprite Sheets, entweder zum
- linken Rand des Bildes, das Sie aus dem Sprite Sheet verwenden möchten, oder zum
- linken Rand des ersten Sprite-Bildes, das Sie zur Erstellung einer Animation verwenden
|
offsety:number |
Der Abstand in Pixeln vom oberen Rand des Sprite Sheets, entweder zum
- oberen Rand des Bildes, das Sie aus dem Sprite Sheet verwenden möchten, oder zum
- oberen Rand des ersten Sprite-Bildes, das Sie zur Erstellung einer Animation verwenden
|
clipwidth:number |
Die Breite in Pixeln, entweder
- des Bildes, das Sie aus dem Sprite Sheet verwenden möchten, oder
- des ersten Sprite-Bildes, das Sie zur Erstellung einer Animation verwenden
|
clipheight:number |
Die Höhe in Pixeln, entweder
- des Bildes, das Sie aus dem Sprite Sheet verwenden möchten, oder
- des ersten Sprite-Bildes, das Sie zur Erstellung einer Animation verwenden
|
alignment:string |
Bestimmt die Position des Bildes in dessen Container. |
scaling:string |
Bestimmt, wie Bilder verschiedener Größe innerhalb der Komponente dargestellt werden. |
totalframecount:number |
Die Anzahl der Frames, aus denen die Animation besteht. |
duration:number |
Die Dauer der einzelnen Frames in Millisekunden. |
loopcount:number |
Die Anzahl der Wiederholungsschleifen der Animation. Wird für eine endlose Wiederholung auf 0 gesetzt. |
autoplay:boolean |
Legt fest, ob die Animation automatisch wiedergegeben wird. |
endonstartframe:boolean |
Legt fest, ob die Animation mit dem ersten Frame beendet wird |
reverseplay:boolean |
Legt fest, ob die Animation rückwärts wiedergegeben wird. |
Ereignisse
Name |
Beschreibung |
animationend |
Wird ausgelöst, wenn die Animation abgeschlossen ist. |
animationpause |
Wird ausgelöst, wenn die Animation pausiert wurde. |
animationplay |
Wird ausgelöst, wenn die Wiedergabe der Animation gestartet wird. |
animationrestart |
Wird ausgelöst, wenn die Animation nach einer Pause neu gestartet wird. |
Methoden
Name |
Beschreibung |
newAnimation(offsetx:number, offsety:number, clipwidth:number, clipheight:number, totalframecount:number, duration:number, loopcount:number, autoplay:boolean, reverseplay:boolean) |
Definiert eine neue Animation. |
play() |
Gibt die Animation wieder. |
pause() |
Pausiert die Animation. |
togglePlay() |
Schaltet zwischen Wiedergabe und Pause der Animation um. |
restart() |
Startet die Animation neu. |
previousFrame() |
Zeigt den vorherigen Frame an. |
nextFrame() |
Zeigt den nächsten Frame an. |
goToFrame(id:number) |
Zeigt einen bestimmten Frame nach Framenummer an. |
Bewertungen
gwd-starratings
Eine Komponente zum Rendern einer Reihe von Sternen, die eine Bewertung darstellen
Eigenschaften
Name |
Beschreibung |
ratingvalue:decimal |
Wert der Bewertung. |
iconsize:number |
Größe des Sternsymbols. |
isemptyshown:boolean |
Legt fest, ob die leeren Sternsymbole angezeigt werden. |
isemptycolored:boolean |
Legt fest, ob die leeren Sternsymbole farbig sind. |
colorprimary:color |
Primäre Füllfarbe. |
colorsecondary:color |
Farbe des sekundären Farbverlaufs. |
gradienttype:string |
Art des Farbverlaufs. |
ratingmax:number |
Höchstbewertung mit Sternen. |
ratingmin:decimal |
Mindestbewertung mit Sternen. |
Ereignisse
Name |
Beschreibung |
complete |
Wird ausgelöst, wenn die Bewertungssymbole erstellt wurden. |
validationerror |
Die Sternebewertung liegt unter der Mindestbewertung. |
Street View
gwd-streetview
Komponente von Google Street View
Eigenschaften
Name |
Beschreibung |
key:string |
Informationen dazu, wie Sie einen eindeutigen Schlüssel für Ihre Anwendung abrufen, finden Sie unter https://developers.google.com/maps/documentation/javascript/get-api-key. |
latitude:decimal |
Breitengrad des Ortes. |
longitude:decimal |
Längengrad des Ortes. |
interaction:boolean |
Legt fest, ob die Ansicht geschwenkt/gedreht werden kann. |
heading:decimal |
Gibt die Kompassausrichtung der Kamera an. Werte von 0 bis 360 sind zulässig (beide Werte geben den Norden an, 90 gibt den Osten und 180 den Süden an). Wird keine Ausrichtung angegeben, erfolgt die Berechnung eines Werts, der die Kamera in Richtung des angegebenen Ortes lenkt, wobei von der Stelle ausgegangen wird, an der das nächstgelegene Foto aufgenommen wurde. |
pitch:decimal |
Gibt den Aufwärts- oder Abwärtswinkel der Kamera im Verhältnis zum Street View-Fahrzeug an. Dieser ist oft, aber nicht immer, eben und waagrecht. Positive Werte versetzen den Winkel der Kamera nach oben (wobei sie bei 90 Grad gerade nach oben zeigt); negative Werte versetzen den Winkel der Kamera nach unten (bei -90 Grad zeigt sie gerade nach unten). |
zoom:number |
Gibt die Zoomeinstellung der Kamera im Verhältnis zum Street View-Fahrzeug an. |
Swipe-Galerie
gwd-swipegallery
Ein Galerieobjekt, bei dem die Frames in einem horizontal navigierbarem Streifen mit Inhalten angezeigt werden
Eigenschaften
Name |
Beschreibung |
images:string |
Ein durch Komma getrennter String der Bildpfade, die in der Galerie verwendet werden. |
groups:string |
Ein durch Komma getrennter String der Gruppen-IDs. |
transition-duration:number |
Animationsgeschwindigkeit der Galerie in Millisekunden. |
start-frame:number |
Der erste Frame für den Start |
num-frames-to-display:number |
Anzahl der gleichzeitig einzublendenden Frames. |
frame-snap-interval:number |
Anzahl der Frames, die bei jeder Wischbewegung weiterbewegt werden. |
autoplay:boolean |
Legt fest, ob die Galerie einmal automatisch rotiert. |
has-navigation:boolean |
Legt fest, ob Steuerelemente für die Galerienavigation eingeschlossen werden. |
navigation-thumbnails:boolean |
Legt fest, ob zur Navigation Miniaturansichten statt Punkte verwendet werden |
navigation-highlight:color |
Ein CSS-Farbcode, der zum Markieren des aktiven Frames in der Navigation verwendet wird |
scaling:string |
Legt fest, wie Bildinhalt für seinen Frame skaliert wird |
swipe-axis:string |
Die Achse, in der die Wischbewegung erkannt wird. |
offset:number |
Die Abstandgröße zwischen nebeneinanderliegenden Inhaltsframes |
frame-width:number |
Die Breite eines Inhaltsframes, überschreibt num-frames-to-display . |
frame-height:number |
Die Höhe eines Inhaltsframes. |
autoplay-duration:number |
Die Gesamtdauer der automatischen Wiedergabe der Frames |
autoplay-step-interval:number |
Das Intervall zwischen den einzelnen Frame-Schritten bei der automatischen Wiedergabe |
exit-urls:string |
Ein durch Komma getrennter String der Exit-URLs, die den Bildern in der Galerie entsprechen. |
disable-gesture:boolean |
Blendet die Komponente „Geste“ aus bzw. deaktiviert sie, wodurch die Tippnavigation der Galerie aktiviert wird. |
pause-front-media:boolean |
Legt fest, ob bei einem Framewechsel die Medienelemente (z. B. Video oder Audio) auf dem vorherigen Frame pausiert werden. |
resume-next-media:boolean |
Legt fest, ob bei einem Framewechsel die Medienelemente (z. B. Video oder Audio) auf dem nächsten Frame fortgesetzt werden. |
Ereignisse
Name |
Beschreibung |
firstinteraction |
Wird ausgelöst, wenn der Nutzer zum ersten Mal mit der Galerie interagiert. |
allframesviewed |
Wird ausgelöst, wenn alle Frames der Galerie mindestens einmal angezeigt wurden. |
allframesloaded |
Wird ausgelöst, wenn alle Frames der Galerie geladen wurden. |
autoplayended |
Wird ausgelöst, wenn die automatische Wiedergabe aus irgendeinem Grund beendet wurde. Das Ereignis event.detail.completed lautet „wahr“, wenn die Wiedergabe nach Erreichen der festgelegten Dauer endet, ansonsten lautet es „falsch“. |
frameshown |
Wird ausgelöst, wenn ein neuer Frame angezeigt wird, nachdem alle erforderlichen Animationen abgeschlossen sind. |
frameactivated |
Wird ausgelöst, wenn ein neuer Frame bereits aktiviert wurde, auch wenn er noch nicht sichtbar ist. |
frameautoplayed |
Wird ausgelöst, wenn ein Frame für die automatische Wiedergabe aktiviert wird. Dieses Ereignis kann häufiger ausgelöst werden als frameshown , da es bei mehreren Frames, die gleichzeitig eingeblendet werden, für jeden einzelnen Frame separat ausgelöst wird. |
frametap |
Wird ausgelöst, wenn der Nutzer auf einen Frame tippt. |
reachleftend |
Wird ausgelöst, wenn das linke Ende der Galerie erreicht wird. |
reachrightend |
Wird ausgelöst, wenn das rechte Ende der Galerie erreicht wird. |
framemouseover |
Wird ausgelöst, wenn der Nutzer die Maus über einen Frame bewegt. |
framemouseout |
Wird ausgelöst, wenn der Nutzer die Maus aus einem Frame herausbewegt. |
trackstart |
Wird ausgelöst, wenn das Ziehen der Maus oder die Ziehbewegung beginnt. |
track |
Die Komponente registriert die X- und Y-Ortsdaten der Maus oder Ziehbewegung. |
trackend |
Wird ausgelöst, wenn das Ziehen der Maus oder die Ziehbewegung endet. |
Methoden
Name |
Beschreibung |
goToFrame(frame:number, opt_animate:string) |
Wechselt zum angegebenen Frame. |
rotateOnce(opt_duration:number, opt_direction:string) |
Zeigt jeden Frame einmal in der Galerie an. |
stopRotation() |
Stoppt die aktuelle automatische Rotation |
goForwards() |
Bewegt die Galerie um einen Frame vor. |
goBackwards() |
Bewegt die Galerie um einen Frame zurück. |
3D-Animation
gwd-swirl
Eine „3D-Animation“-Komponente
Eigenschaften
Name |
Beschreibung |
yscroll:decimal |
Der Scrollfaktor für die 3-D-Animation beim Rendern im Anzeigebereich. |
settings:string |
Öffnet das Dialogfeld mit den Komponenteneinstellungen. |
Ereignisse
Name |
Beschreibung |
ready |
Wird ausgelöst, wenn alle untergeordneten Assets geladen wurden. |
Interaktionsfläche
gwd-taparea
Abstraktion für Ereignis „Klicken“ oder „Berühren“
Eigenschaften
Name |
Beschreibung |
exit-override-url:string |
Die URL für den Exit, wenn auf die Interaktionsfläche getippt wird |
Ereignisse
Name |
Beschreibung |
action |
Wird ausgelöst, wenn der Nutzer auf die Schaltfläche tippt (Mobilgerät) oder klickt (Computer). |
Für Anruf/SMS-Versand tippen
gwd-taptocall
Diese Komponente ruft bei Klicken oder Berühren die konfigurierte Telefonnummer an bzw. sendet eine SMS.
Eigenschaften
Name |
Beschreibung |
number:string |
Telefonnummer für Anruf oder SMS |
action:string |
Auswählen, um eine SMS-Nachricht zu senden oder einen Telefonanruf zu starten |
Ereignisse
Name |
Beschreibung |
action |
Wird ausgelöst, wenn der Nutzer auf die Schaltfläche tippt (Mobilgerät) oder klickt (Computer). |
taptocall |
Wird bei einem Anruf oder beim Senden einer SMS ausgelöst. |
Methoden
Name |
Beschreibung |
dial() |
Beginnt einen Anruf oder sendet eine SMS an die konfigurierte Nummer. |
Übergangsgalerie
gwd-transitiongallery
Eine „Übergangsgalerie“-Komponente
Eigenschaften
Name |
Beschreibung |
settings:string |
Öffnet das Dialogfeld mit den Komponenteneinstellungen. |
images:string |
Ein durch Komma getrennter String der Bildpfade, die in der Galerie verwendet werden. |
scaling:string |
Legt fest, wie das Bild für den Frame skaliert wird. |
exit-urls:string |
Ein durch Komma getrennter String der Exit-URLs, die den Bildern in der Galerie entsprechen. |
Ereignisse
Name |
Beschreibung |
autoplayended |
Wird ausgelöst, wenn die automatische Wiedergabe aus irgendeinem Grund beendet wurde. Das Ereignis event.detail.completed lautet „wahr“, wenn die Wiedergabe nach Erreichen der festgelegten Schleifenanzahl endet, ansonsten lautet es „falsch“. |
frameactivated |
Wird ausgelöst, wenn ein neuer Frame bereits aktiviert wurde, auch wenn er noch nicht sichtbar ist. |
frameshown |
Wird ausgelöst, wenn ein neuer Frame angezeigt wird. |
frametap |
Wird ausgelöst, wenn der Nutzer auf einen Frame tippt. |
rotateonceended |
Wird ausgelöst, wenn die Rotation aus irgendeinem Grund beendet wurde. Das Ereignis event.detail.completed lautet „wahr“, wenn die Rotation wie vorgesehen endet, ansonsten lautet es „falsch“. |
reachleftend |
Wird ausgelöst, wenn das linke Ende der Galerie erreicht wird. |
reachrightend |
Wird ausgelöst, wenn das rechte Ende der Galerie erreicht wird. |
Methoden
Name |
Beschreibung |
goToFrame(frame:number, with_animation:boolean) |
Wechselt zum angegebenen Frame. |
rotateOnce(startFromCurrentFrame:boolean) |
Zeigt den Frame in der Galerie ab dem Ausgangsframe an, wenn startFromCurrentFrame „falsch“ lautet oder nicht angegeben ist, ansonsten ab dem aktuellen Frame. Die Drehung endet, bevor der Ausgangsframe erreicht wird. |
startAutoplay(startFromCurrentFrame:boolean) |
Startet die automatische Wiedergabe in der Galerie ab dem Ausgangsframe, wenn startFromCurrentFrame „falsch“ lautet oder nicht angegeben ist, ansonsten ab dem aktuellen Frame. Die automatische Wiedergabe endet, wenn die festgelegte Schleifenanzahl erreicht wird. |
stop() |
Bricht die Animation ab, wenn sie ausgeführt wird. |
goForwards() |
Bewegt die Galerie um einen Frame vor. |
goBackwards() |
Bewegt die Galerie um einen Frame zurück. |
Übergang „Jalousien“
gwd-blinds
Bei der Komponente „Jalousien-Effekt“ wird das neue Bild so angezeigt, als ob es sich hinter Jalousien mit Lamellen befindet, die sich nacheinander beginnend von einem Rand und dann weiter zum gegenüberliegenden Rand öffnen
Eigenschaften
Name |
Beschreibung |
direction:dropdown |
Die Richtung des Effekts. |
blinds:number |
Die Anzahl der Jalousien. |
transparentbackground:boolean |
Gibt an, ob der transparente Hintergrund angezeigt werden soll, bevor die Jalousien des neuen Bildes gerendert werden. Bei „falsch“ überlagern die Jalousien das alte Bild. |
Übergang „Tür-Wischen“
gwd-door-wipe
Die Komponente „Tür-Wischen-Effekt“ ist eine Variation des Wischeffekts mit zwei Typen, die auf der Wischrichtung basieren. Durch ein öffnendes Tür-Wischen wird das neue Bild beginnend von der Mitte des alten Bildes geöffnet, wie eine sich öffnende Doppeltür. Durch ein schließendes Tür-Wischen wird das neue Bild beginnend von den gegenüberliegenden Rändern des alten Bildes geöffnet, wie eine sich schließende Doppeltür.
Eigenschaften
Name |
Beschreibung |
orientation:dropdown |
Die Ausrichtung der Animation. |
direction:dropdown |
Die Richtung des Tür-Wischen-Effekts. |
Übergang „Ausblenden“
gwd-fade
Komponente „Ausblenden-Übergang“
Übergang „Iris-Wischen“
gwd-iris-wipe
Bei der Komponente „Iris-Wischen-Effekt“ wird das neue Bild in einem immer größer werdenden Kreis angezeigt, der standardmäßig von der Mitte des Frames ausgeht
Eigenschaften
Name |
Beschreibung |
originpercentx:number |
Der Ausgangspunkt des größer werdenden Kreises in der x-Achse relativ zur Breite des Frames. |
originpercenty:number |
Der Ausgangspunkt des größer werdenden Kreises in der y-Achse relativ zur Höhe des Frames. |
Übergang „Schieben“
gwd-push
Bei der Komponente „Schieben-Übergangseffekt“ wird das alte Bild durch das neue aus der Ansicht geschoben
Eigenschaften
Name |
Beschreibung |
direction:dropdown |
Die Richtung des Schieben-Effekts. |
Übergang „Radiales Wischen“
gwd-radial-wipe
Die Komponente „Radiales Wischen-Effekt“ ist eine Variation des Wischeffekts, bei der wie bei einem Uhrzeiger um einen vorgegebenen Punkt herum eine radiale Wischbewegung ausgelöst und so das neue Bild angezeigt wird
Eigenschaften
Name |
Beschreibung |
direction:dropdown |
Die Richtung des Effekts. |
originpercentx:number |
Der Ausgangspunkt in der x-Achse relativ zur Breite des Frames, von dem ausgehend eine radiale Wischbewegung ausgelöst wird, um das neue Bild anzuzeigen. |
originpercenty:number |
Der Ausgangspunkt in der y-Achse relativ zur Höhe des Frames, von dem ausgehend eine radiale Wischbewegung ausgelöst wird, um das neue Bild anzuzeigen. |
Übergang „Drehen“
gwd-rotate
Bei der Komponente „Drehen-Effekt“ beginnt zuerst das alte Bild sich zu drehen und wird herangezoomt, dann wird das neue Bild noch in der Drehbewegung herausgezoomt
Eigenschaften
Name |
Beschreibung |
direction:dropdown |
Die Richtung des Effekts. |
Übergang „Slicen“
gwd-slice
Bei der Komponente „Slicen-Effekt“ ist das neue Bild in Segmenten oder Balken zu sehen, die nacheinander in der Ansicht angezeigt werden
Eigenschaften
Name |
Beschreibung |
direction:dropdown |
Die Richtung des Slicen-Effekts. |
slices:number |
Die Anzahl der Segmente oder Balken, die die Ansicht teilen. |
transparentbackground:boolean |
Legt fest, ob der transparente Hintergrund angezeigt werden soll, bevor die neuen Bildsegmente Stück für Stück eingeblendet werden. Bei „falsch“ überlagern die Segmente das alte Bild. |
Übergang „Teilen und Schieben“
gwd-split-push
Die Komponente „Teilen und Schieben-Effekt“ ist eine Variation des Schieben-Effekts, bei der das alte Bild vertikal oder horizontal in zwei Teile geteilt wird. Diese werden dann von entsprechenden Teilen des neuen Bildes in entgegengesetzten Richtungen aus der Ansicht geschoben.
Eigenschaften
Name |
Beschreibung |
orientation:dropdown |
Die Ausrichtung der Animation. |
Übergang „Streifen-Wischen“
gwd-stripe-wipe
Die Komponente „Streifen-Wischen-Effekt“ ist eine Variation des Wischeffekts, bei der Streifen in wechselnden Farben gleichzeitig auf dem Bildschirm entstehen und das alte Bild bedecken. Dann schrumpfen die Streifen zusammen, sodass das neue Bild angezeigt wird.
Eigenschaften
Name |
Beschreibung |
direction:dropdown |
Die Richtung des Effekts. |
stripes:number |
Die Anzahl der Streifen jeder Farbe. |
color1:color |
Hexadezimalwert einer der beiden abwechselnden Streifenfarben. |
color2:color |
Hexadezimalwert für die andere abwechselnde Streifenfarbe. |
Übergang „Venezianische Jalousien“
gwd-venetian-blinds
Bei der Komponente „Venezianische Jalousien-Effekt“ wird das neue Bild so angezeigt, als ob es sich hinter venezianischen Jalousien mit Lamellen befindet, die sich gleichzeitig oder nacheinander öffnen
Eigenschaften
Name |
Beschreibung |
orientation:dropdown |
Die Ausrichtung der Animation. |
blinds:number |
Die Anzahl der Jalousien. |
staggered:boolean |
Legt fest, ob die Lamellen verzögert ineinander übergehen. Bei „falsch“ gehen alle Lamellen gleichzeitig ineinander über. |
Übergang „Wischen“
gwd-wipe
Komponente „Wischen-Übergang“. Bei dem regulären Wischen-Effekt wird das alte Bild hinter einer Linie, die sich von einem Bildrand zum anderen bewegt, nach und nach durch das neue Bild ersetzt.
Eigenschaften
Name |
Beschreibung |
direction:dropdown |
Die Richtung des Effekts. |
angle:number |
Der Neigungswinkel der Linie, die das alte Bild durch das neue Bild ersetzt. |
Übergang „Zickzack“
gwd-zigzag
Bei der Komponente „Zickzack-Effekt“ wird das neue Bild in einem sich schlängelnden Gittermuster angezeigt. Durch einen horizontalen Zickzack-Effekt werden die Kacheln des neuen Bilds in aufeinanderfolgenden Reihen abwechselnd von links nach rechts und umgekehrt angezeigt. Durch einen vertikalen Zickzack-Effekt werden die Kacheln des neuen Bilds in aufeinanderfolgenden Spalten abwechselnd von oben nach unten und umgekehrt angezeigt.
Eigenschaften
Name |
Beschreibung |
orientation:dropdown |
Die Ausrichtung der Animation. |
rows:number |
Die Anzahl der Reihen des Zickzack-Effekts. |
columns:number |
Die Anzahl der Spalten des Zickzack-Effekts. |
Video
gwd-video
Eine Komponente, die ein HTMLVideoElement
einbindet
Eigenschaften
Name |
Beschreibung |
autoplay:boolean |
Legt fest, ob das Video beim Laden automatisch wiedergegeben wird |
loop:boolean |
Legt fest, ob das Video nach dem Fertigstellen in Schleife wiedergegeben wird |
muted:boolean |
Legt fest, ob das Video stumm gestartet wird |
controls:boolean |
Legt fest, ob die standardmäßigen, nativen Steuerelemente des Videoplayers aktiviert werden. |
sources:file |
Ein durch Komma getrennter String von Videos in unterschiedlichen Formaten. |
poster:string |
Eine URL, die auf einen Posterframe verweist, der angezeigt wird, bis der Nutzer eine Wiedergabe oder Suche startet. |
Ereignisse
Name |
Beschreibung |
play |
Wird ausgelöst, wenn die Wiedergabe der Medien nach dem Pausieren gestartet wird, d. h. wenn sie nach einem vorangehenden Ereignis "pause" wieder aufgenommen wird |
pause |
Wird ausgelöst, wenn die Wiedergabe pausiert wird |
playing |
Wird ausgelöst, wenn die Medien entweder zum ersten Mal nach einer Pause oder nach dem Ende erneut wiedergegeben werden |
ended |
Wird ausgelöst, wenn die Wiedergabe abgeschlossen ist |
volumechange |
Wird ausgelöst, wenn sich die Audiolautstärke beim Einstellen oder durch die Änderung des Attributs zum Stummschalten ändert |
seeked |
Wird ausgelöst, wenn ein Suchvorgang abgeschlossen ist |
waiting |
Wird ausgelöst, wenn der angeforderte Vorgang, z. B. die Wiedergabe, verzögert wird, weil zuerst ein anderer Vorgang abgeschlossen werden muss, z. B. eine Suche |
Methoden
Name |
Beschreibung |
mute() |
Wechselt zwischen Video stummschalten und Stummschaltung aufheben. |
pause() |
Pausiert das Video. |
play() |
Gibt das Video wieder. |
replay() |
Gibt das Video noch einmal wieder. |
seek(time:number) |
Springt zur angegebenen Zeit im Video. |
setVolume(volume:number) |
Stellt die Lautstärke des Videos ein. |
setSources(sources:string) |
Legt die Quellen des Videos fest. |
YouTube
gwd-youtube
Erweitert HTMLElement
zur Zusammenfassung von Aufrufen der YouTube API
Eigenschaften
Name |
Beschreibung |
video-url:string |
Die YouTube-URL für das Video. |
autoplay:string |
In unterstützten Umgebungen wird das YouTube-Video nach dem Laden automatisch wiedergegeben. |
preview-duration:number |
Legt die Dauer der Vorschau fest; wird nur verwendet, wenn das Attribut „Autoplay“ auf preview gesetzt ist. |
controls:string |
Zeigt die Videosteuerelemente an (none , autohide ). |
color:string |
Das Farbdesign der Fortschrittsanzeige des Players (rot oder weiß) |
muted:boolean |
Legt fest, ob das Video stumm gestartet wird. |
loop:boolean |
Legt fest, ob das Video nach dem Fertigstellen in Schleife wiedergegeben wird |
pause-on-end:boolean |
Hält das Video an, wenn noch 1 Sekunde verbleibt. |
start-position:number |
Startet das Video zu einem festgelegten Zeitpunkt in Sekunden |
allowfullscreen:boolean |
Vollbild auf Desktop zulassen |
extra-player-args:string |
Zusätzliche YouTube-Player-Parameter, wie unter https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#Parameters beschrieben |
Ereignisse
Name |
Beschreibung |
buffering |
Der YouTube-Player nutzt die Zwischenspeicherung. |
ended |
Das YouTube-Video ist am Ende angelangt. |
paused |
Das YouTube-Video wurde angehalten. |
playing |
Das YouTube-Video wird wiedergegeben. |
replayed |
Das YouTube-Video wurde erneut abgespielt. |
viewed0percent |
Wird ausgelöst, wenn 0 % des Videos angesehen wurden. |
viewed25percent |
Wird ausgelöst, wenn 25 % des Videos angesehen wurden. |
viewed50percent |
Wird ausgelöst, wenn 50 % des Videos angesehen wurden. |
viewed75percent |
Wird ausgelöst, wenn 75 % des Videos angesehen wurden. |
viewed100percent |
Wird ausgelöst, wenn 100 % des Videos angesehen wurden. |
previewed0percent |
Wird ausgelöst, wenn 0 % der Vorschau angesehen wurden. |
previewed25percent |
Wird ausgelöst, wenn 25 % der Vorschau angesehen wurden. |
previewed50percent |
Wird ausgelöst, wenn 50 % der Vorschau angesehen wurden. |
previewed75percent |
Wird ausgelöst, wenn 75 % der Vorschau angesehen wurden. |
previewed100percent |
Wird ausgelöst, wenn 100 % der Vorschau angesehen wurden. |
Methoden
Name |
Beschreibung |
toggleMute() |
Wechselt zwischen Video stummschalten und Stummschaltung aufheben. |
pause() |
Pausiert das Video. |
play() |
Gibt das Video wieder. |
replay() |
Gibt das Video noch einmal wieder. |
seek(time:number) |
Springt zur angegebenen Zeit im Video. |
setYouTubeId(id:string, cueOnly:boolean) |
Ändert die Quelle des YouTube-Videos in die angegebene ID. |